<template>
    <div class='queryPanel'>
        <div class="" @keydown.enter="handleFilter">
            
            <el-form :inline="true" class="page-query-form" :label-width="labelWidth" label-suffix="："  @submit.native.prevent>
                <slot />
                <slot name='more' v-if='isOpen' />
            
                <el-form-item :class='  isOpen? "opened":"" '>
                    <div class='queryPanelBtns'>
                    <el-button  type="primary" :icon="Search" @click="handleFilter">搜索</el-button>

                    <slot name="btn">

                    </slot>

                    <el-button  type="plain"   @click="handleRest">清空</el-button>

                    <div  v-if='showOpen'>
                        <div class='linkBtn' v-if="!isOpen" @click="open()">
                            展开<i class="el-icon-arrow-down" />
                        </div>
                        <div class='linkBtn' v-if="isOpen" @click="close()">
                            收起<i class="el-icon-arrow-up" />
                        </div>
                    </div>
                    </div>
                </el-form-item>
            </el-form>
           
            
        </div>


        
    </div>
</template>
<style>

.page-query-form.el-form .el-form-item{
    width:25%;
    margin-bottom: 20px;
    display:flex;
    float:left;
    margin-right: 0;
    padding-right:10px;
}
.page-query-form.el-form .el-form-item .el-input__inner{
    width:100%;
    
}

.page-query-form.el-form .el-form-item--medium .el-form-item__content {
    line-height: 36px;
    flex-grow: 1;
    width: 100px;
}

.page-query-form.el-form .el-form-item--medium .el-form-item__content .el-select{
    width: 100%;
}

.page-query-form .queryPanelBtns{
    display: flex;
    margin-left: 24px;
    margin-right: 24px;
}
</style>

<style scoped>

.filter-bottomBtns{
    margin-top: 10px;
    text-align: right;

}
.linkBtn{
    color:#004e9b; 
    width:80px;
    text-align: center;
    cursor: pointer;
}
</style>
<script setup lang="ts">
import {Search} from '@element-plus/icons-vue'
import {ref,defineProps,defineEmits,defineExpose} from 'vue'


const isOpen = ref(false);

defineProps({
    showOpen:{
            type:Boolean,
            default:false
        },
        labelWidth:{
            type:String,
            default:'100px'
        }
});

const emits = defineEmits(['query','reset','open','close']);

 

function handleFilter(){

            emits('query')
            
}

        function     handleRest(){
            emits('reset')
        }
        
        function open(){
            isOpen.value = true;
            emits('open')
        }

        function  close(){
            isOpen.value = false;
            emits('close')
        }

        defineExpose({
            open
        });
</script>